<template>
  <div class="pad-20 bgc-default">
    <div class="pad-l-20 pad-r-20 pad-t-15 bg-color-white">
      <!--顶部搜索 -->
      <div class="top-operate-default">
        <div class="search-item">
          <label class="font-14">搜索店播：</label>
          <el-select v-model="activityType" style="width: 120px">
            <el-option label="直播标题 " value="0"></el-option>
            <el-option label="店长昵称" value="1"></el-option>
            <el-option label="店长姓名" value="2"></el-option>
            <el-option label="主播昵称" value="3"></el-option>
            <el-option label="店播申请号" value="4"></el-option>
          </el-select>
          <el-input
            @keyup.enter.native="handleSearch"
            v-model="searchKeyword"
            placeholder="请输入关键词"
            style="width: 200px"
          ></el-input>
          <label class="font-14 mar-l-20">计划时间：</label>
          <el-select v-model="searchListQuery.dateTimeType" class="special-select">
            <el-option label="计划开始时间 " value="0"></el-option>
            <el-option label="计划结束时间" value="1"></el-option>
            <el-option label="申请时间" value="2"></el-option>
          </el-select>
          <el-date-picker
            v-model="datePicker"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetClick">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!--<div>-->
      <!--<el-button @click="handleExport">导出</el-button>-->
      <!--</div>-->
      <!--tab状态 -->
      <div class="tabs-box mar-b-15 mar-t-15">
        <el-tabs
          type="card"
          v-model="applyStatus"
          @tab-click="applyStatusCilck"
        >
          <el-tab-pane :label="stayName" name="0"></el-tab-pane>
          <el-tab-pane :label="adoptName" name="1"></el-tab-pane>
          <el-tab-pane :label="rejectName" name="2"></el-tab-pane>
          <el-tab-pane :label="allName" name="4"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table
          ref="multipleTable"
          :data="goodsList"
          @selection-change="handleSelectionChange"
          v-loading="listLoading"
          element-loading-text="加载中"
          style="width: 100%"
          header-cell-class-name="default-header"
          row-class-name="default-row"
        >
          <el-table-column
            width="400px"
            label="直播间信息"
            fixed="left"
            class="self-thead"
          >
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p" @click="handleEdit(scope.row, 1)">
                <label><img :src="scope.row.coverImg" class="user-avatar cursor-p"/></label>
                <div class="font-14 pad-l-10 flex-col-between height-120">
                  <div>{{ scope.row.roomName }}</div>
                  <div class="line-h-14">
                    <div><span class="font-color-9">开播：</span>{{ scope.row.startDate }}</div>
                    <div><span class="font-color-9">结束：</span>{{ scope.row.endDate }}</div>
                    <div><span class="font-color-9">房号：</span>房号不知道字段</div>
                    <div><span class="font-color-9">主播：</span>{{ scope.row.anchorName }}</div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            min-width="200px"
            label="申请店主"
            class="self-thead"
          >
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p">
                <label>
                  <img :src="scope.row.avatar" class="user-avatar-r" v-if="scope.row.avatar"/>
                  <img v-else src="https://veekrayimg.joinsun.vip/head-portrait.png" class="user-avatar-r" alt="">
                </label>
                <div class="font-14 pad-l-10 line-h-14">
                  <div><span class="font-color-9">昵称：</span>{{ scope.row.nickname }}</div>
                  <div><span class="font-color-9">姓名：</span>{{ scope.row.realName }}</div>
                  <div><span class="font-color-9">手机：</span>{{ scope.row.phone ? scope.row.phone : '' }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            min-width="150px"
            label="直播间"
            prop="roomId"
            class="self-thead"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.roomId">{{ scope.row.roomId }}</span>
              <span v-if="!scope.row.roomId">未创建</span>
            </template>
          </el-table-column>
          <el-table-column
            min-width="200px"
            label="申请时间"
            prop="createTime"
          ></el-table-column>
          <el-table-column
            min-width="150px"
            label="状态"
            prop="liveStatus"
            v-if="applyStatus === '4'"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.applyStatus == 0">待审核</span>
              <span v-if="scope.row.applyStatus == 1">审核通过</span>
              <span v-if="scope.row.applyStatus == 2">审核未通过</span>
            </template>
          </el-table-column>
          <el-table-column
            min-width="120px"
            label="操作"
            align="right"
            fixed="right"
            class="self-thead"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="medium"
                @click="handleEdit(scope.row, 1)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { pageLiveRoomApply, countLiveRoom } from '@/api/user/liveRoomApply'
import { downloadFile } from '@/api/common/common'
import { getToken } from '@/utils/auth'
import elDragDialog from '@/directive/el-dragDialog'

export default {
  directives: {
    elDragDialog
  },
  data() {
    return {
      total: null,
      activityType: '0',
      datePicker: [],
      multipleSelection: [],
      listLoading: true,
      searchListQuery: {
        enterpriseId: this.getEnterpriseId(),
        dateTimeType: '0',
        currentPage: 1,
        size: 10,
        startTime: '',
        endTime: ''
      },
      liveGoods: {
        liveGoodsId: '',
        goodsImgUrl: '',
        price: '',
        minPrice: '',
        maxPrice: '',
        originalPrice: '',
        nowPrice: '',
        applyStatus: '0',
        goodsId: '',
        enterpriseId: this.getEnterpriseId()
      },
      liveGoodsVisible: false,
      searchKeyword: '',
      dict: {},
      applyStatus: '0',
      goodsList: [],
      stayName: '待审核',
      adoptName: '审核通过',
      rejectName: '审核未通过',
      allName: '全部'
    }
  },
  // 初始化页面
  created() {
    this.token = { accessToken: getToken() }
    this.initGoodsList()
  },
  filters: {
    priceFilter(e) {
      return e.toFixed(2)
    }
  },
  mounted() {},
  methods: {
    // 更改当前页数
    handleCurrentChange(val) {
      this.searchListQuery.currentPage = val
      this.initGoodsList()
    },
    applyStatusCilck() {
      this.initGoodsList()
    },
    // 更改当前页面大小
    handleSizeChange(val) {
      this.searchListQuery.size = val
      this.initGoodsList()
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    initCount() {
      const date = {}
      if (this.datePicker) {
        date['startTime'] = this.datePicker[0]
        date['endTime'] = this.datePicker[1]
      } else {
        date['startTime'] = ''
        date['endTime'] = ''
      }
      if (this.activityType === '0') {
        date['roomName'] = this.searchKeyword
        date['nickname'] = ''
        date['realName'] = ''
        date['anchorName'] = ''
        date['applyCode'] = ''
      }
      if (this.activityType === '1') {
        date['roomName'] = ''
        date['nickname'] = this.searchKeyword
        date['realName'] = ''
        date['anchorName'] = ''
        date['applyCode'] = ''
      }
      if (this.activityType === '2') {
        date['roomName'] = ''
        date['nickname'] = ''
        date['realName'] = this.searchKeyword
        date['anchorName'] = ''
        date['applyCode'] = ''
      }
      if (this.activityType === '3') {
        date['roomName'] = ''
        date['nickname'] = ''
        date['realName'] = ''
        date['anchorName'] = this.searchKeyword
        date['applyCode'] = ''
      }
      if (this.activityType === '4') {
        date['roomName'] = ''
        date['nickname'] = ''
        date['realName'] = ''
        date['anchorName'] = ''
        date['applyCode'] = this.searchKeyword
      }
      date['enterpriseId'] = this.getEnterpriseId()
      countLiveRoom(date).then((response) => {
        if (response.isError) return
        this.stayName = '待审核(' + response.data.stayNum + ')'
        this.adoptName = '审核通过(' + response.data.adoptNum + ')'
        this.rejectName = '审核未通过(' + response.data.rejectNum + ')'
        const allNum =
          response.data.stayNum +
          response.data.adoptNum +
          response.data.rejectNum
        this.allName = '全部(' + allNum + ')'
      })
    },
    initGoodsList() {
      this.initCount()
      this.listLoading = true
      // 搜索状态
      if (this.applyStatus === '4') {
        this.searchListQuery['applyStatus'] = ''
      } else {
        this.searchListQuery['applyStatus'] = this.applyStatus
      }
      if (this.datePicker) {
        this.searchListQuery.startTime = this.datePicker[0]
        this.searchListQuery.endTime = this.datePicker[1]
      } else {
        this.searchListQuery.startTime = ''
        this.searchListQuery.endTime = ''
      }
      if (this.activityType === '0') {
        this.searchListQuery['roomName'] = this.searchKeyword
        this.searchListQuery['nickname'] = ''
        this.searchListQuery['realName'] = ''
        this.searchListQuery['anchorName'] = ''
        this.searchListQuery['applyCode'] = ''
      }
      if (this.activityType === '1') {
        this.searchListQuery['roomName'] = ''
        this.searchListQuery['nickname'] = this.searchKeyword
        this.searchListQuery['realName'] = ''
        this.searchListQuery['anchorName'] = ''
        this.searchListQuery['applyCode'] = ''
      }
      if (this.activityType === '2') {
        this.searchListQuery['roomName'] = ''
        this.searchListQuery['nickname'] = ''
        this.searchListQuery['realName'] = this.searchKeyword
        this.searchListQuery['anchorName'] = ''
        this.searchListQuery['applyCode'] = ''
      }
      if (this.activityType === '3') {
        this.searchListQuery['roomName'] = ''
        this.searchListQuery['nickname'] = ''
        this.searchListQuery['realName'] = ''
        this.searchListQuery['anchorName'] = this.searchKeyword
        this.searchListQuery['applyCode'] = ''
      }
      if (this.activityType === '4') {
        this.searchListQuery['roomName'] = ''
        this.searchListQuery['nickname'] = ''
        this.searchListQuery['realName'] = ''
        this.searchListQuery['anchorName'] = ''
        this.searchListQuery['applyCode'] = this.searchKeyword
      }
      pageLiveRoomApply(this.searchListQuery).then((response) => {
        this.total = response.data.total
        this.goodsList = response.data.records
        if (response.data.dict) {
          this.dict = response.data.dict
        }
        this.listLoading = false
        console.log(this.goodsList)
      })
    },
    handleSearch() {
      this.searchListQuery.currentPage = 1
      this.initGoodsList()
    },
    resetClick() {
      this.searchListQuery = {
        enterpriseId: this.getEnterpriseId(),
        dateTimeType: '0',
        currentPage: 1,
        size: 10,
        startTime: '',
        endTime: ''
      }
      this.searchKeyword = ''
      this.datePicker = []
      this.activityType = '0'
      this.initGoodsList()
    },
    // 导出
    handleExport() {
      this.searchListQuery.enterpriseId = this.getEnterpriseId()
      downloadFile(
        '/user/liveRoomApply/exportLiveRoomApply',
        { liveRoomApply: this.searchListQuery },
        '导出店播申请模板.xlsx'
      )
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({
        path: '/live/member-live/edit/index',
        query: { applyId: row.applyId }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.btn-search {
  height: 60px;
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 150px;
  height: 120px;
  display: block;
  padding: 1px;
  border: #efefef 1px solid;
}

.user-avatar-r {
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 50px;
}

.category-style {
  color: #3abbdb;
}

.gray-bar {
  background: #e4e4e4;
  padding: 20px;
  margin-bottom: 20px;
  width: 80%;
}
.tips {
  color: gray;
  font-size: 12px;
  line-height: 1.2;
  padding-top: 5px;
}
.table-container {
  /deep/ .el-table thead {
    color: #000 !important;
    font-weight: 500 !important;
  }
}
.line-h-14{
  line-height: 1.4;
}
.flex-col-between{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.special-select{
  /deep/.el-input{
    width: 140px;
  }
}
</style>
